<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>百日无违章排行榜</title>
    <link rel="stylesheet" href="../../../resource/css/dropload.css">
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .nav
        {
            margin: 0;
            padding: 0;
            border-bottom: 1px solid #dcdcdc;
            height: 3.5rem;
            line-height: 51px;
        }
        .title{
            width: 4rem;
            height: 3.5rem;
            line-height: 3.5rem;
            margin: 0 auto;
            padding: 0;
            z-index:-1;
        }
        .more{
            height: 3.5rem;
            line-height: 3.5rem;
            position:absolute;
            top: 0;
            right: 0.5rem;
            font-size: 14px;
            color: #3598db;
        }

        #content table{
            margin: 0;
            padding: 0;
            width: 100%;
        }
        #content table tr{
            width: 100%;
            list-style-type:none;
            height: 3rem;
            border-bottom: 1px solid lightgray;
            display: block;
            padding: 0;
        }
        li{
            border-bottom:1px solid #dcdcdc;
            height: 4rem;
            list-style: none;
            margin: 0 0.5rem 0 0.5rem;
        }
        .left{
            height: 4rem;
            width: 4rem;
            float: left;
            text-align:center;
            line-height: 4rem;
        }
        .rankimg {
            height: 2.8rem;
            width: 3rem;
            margin: 0.6rem 0 0 0.5rem;
        }

        .name{
            font-size: 18px;
            width:5rem;
            height: 4rem;
            margin: 0 0 0 1rem;
            line-height: 4rem;
            float: left;
        }
        .number{
            font-size: 16px;
            width:7rem;
            height: 4rem;
            line-height: 4rem;
            float: left;
        }
        .daytime{
            font-size: 16px;
            width:4rem;
            height: 4rem;
            margin: 0 0 0 1rem;
            line-height: 4rem;
            float: left;
        }
    </style>
</head>
<body>
<div class="nav">
    <div class="title">排行榜</div>
    <a href="user.html"><div class="more" id="more">我的</div></a>
</div>
<div class="content" id="content">
    <ul id="list">
            <li>
                <div class="left"><img class="rankimg" src="../../../resource/img/ranklistfirst.png"/></div>
                <div class="name">王宇</div>
                <div class="number">鲁m123456</div>
                <div class="daytime">2天</div>
            </li>
    </ul>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script src="../../../resource/js/dropload.min.js"></script>
<script>
    $(function () {
        // 页数
        var page = 0;
        // 每页展示10个
        var size = 10;

        // dropload
        $('.content').dropload({
            scrollArea: window,
            domUp: {
                domClass: 'dropload-up',
                domRefresh: '<div class="dropload-refresh">↓下拉刷新↓</div>',
                domUpdate: '<div class="dropload-update">↑释放更新↑</div>',
                domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
            },
            domDown: {
                domClass: 'dropload-down',
                domRefresh: '<div class="dropload-refresh">↑上拉加载更多↑</div>',
                domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
                domNoData: '<div class="dropload-noData">没东西了</div>'
            },
            loadUpFn: function (me) {
                $.ajax({
                    type: 'POST',
                    url: '/Violation/getUserRankList',
                    data: {
                        // token: token,
                        page: 0,
                        size: 10
                    },
                    dataType: 'json',
                    success: function (data) {
                        // console.log(data);
                        // return false;
                        page = 1;
                        var list = data.data;
                        var result = '';
                        for (var i = 0; i < list.length; i++) {
                            result += '<li><div class="left">\n';
                            if (i < 3) {
                                if (i == 0) {
                                    result += '<img class="rankimg" src="../../../resource/img/ranklistfirst.png"/>';
                                } else if (i == 1) {
                                    result += '<img class="rankimg" src="../../../resource/img/ranklistsecound.png"/>';
                                } else {
                                    result += '<img class="rankimg" src="../../../resource/img/ranklistthird.png"/>';
                                }
                            }
                            else {
                                result += (page - 1) * 10 + i + 1;
                            }
                            // result += '<td class="name">\n' + list[i].name + '</td>\n ' + '<td class="number">' + list[i].car_number + '</td>\n' + '</tr>';
                            result += '</div><div class="name">\n' + list[i].name +'</div><div class="number">\n' + list[i].car_number +  '</div><div class="daytime">\n'+list[i].+'</div>\n' +'</li>';

                        }
                        // 为了测试，延迟1秒加载
                        setTimeout(function () {
                            $('#list').html(result);
                            // 每次数据加载完，必须重置
                            me.resetload();
                            // 重置页数，重新获取loadDownFn的数据
                            // 解锁loadDownFn里锁定的情况
                            // me.unlock();
                            me.noData(false);
                        }, 1000);
                    },
                    error: function (xhr, type) {
                        alert('网络出错!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            },
            loadDownFn: function (me) {
                var result = '';
                $.ajax({
                    type: 'POST',
                    url: '/Violation/getUserRankList',
                    data: {
                        // token:token,
                        page: page,
                        size: size
                    },
                    dataType: 'json',
                    success: function (data) {
                        // console.log(data);
                        // console.log(page);
                        // return false;
                        var list = data.data;
                        var arrLen = data.data.length;
                        if (arrLen > 0) {
                            for (var i = 0; i < arrLen; i++) {
                                result += '<li><div class="left">\n';
                                if (page == 0) {
                                    if (i < 3) {
                                        if (i == 0) {
                                            result += '<img class="rankimg" src="../../../resource/img/ranklistfirst.png"/>';
                                        } else if (i == 1) {
                                            result += '<img class="rankimg" src="../../../resource/img/ranklistsecound.png"/>';
                                        } else {
                                            result += '<img class="rankimg" src="../../../resource/img/ranklistthird.png"/>';
                                        }
                                    } else {
                                        result += page * 10 + i + 1;
                                    }
                                }
                                result += '</div><div class="name">\n' + list[i].name +'</div><div class="number">\n' + list[i].car_number +  '</div><div class="daytime">\n'+list[i].+'</div>\n' +'</li>';
                            }
                            // 如果没有数据
                        } else {
                            // 锁定
                            me.lock();
                            // 无数据
                            me.noData();
                        }
                        page++;
                        // 为了测试，延迟1秒加载
                        setTimeout(function () {
                            // 插入数据到页面，放到最后面
                            $('#list').append(result);
                            me.lock()
                            // 每次数据插入，必须重置
                            me.resetload();
                        }, 1000);
                    },
                    error: function (xhr, type) {
                        // alert('网络错误!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            },
            threshold: 50
        });

        $.ajax({
            data:{

            },
        })
    })
</script>

</html>